<template>
  <div>
    <el-row>
      <el-col>
        <!-- 放搜索条件 -->

        <el-form :inline="true" :model="withdrawalParam" class="demo-form-inline">
          <el-form-item label="编号">
            <el-input v-model="withdrawalParam.dwNo" placeholder="请输入编号" @change="queryCondition"></el-input>
          </el-form-item>
          <el-form-item label="病人姓名">
            <el-input v-model="withdrawalParam.patientName" placeholder="请输入姓名" style="width: 100px;" @change="queryCondition"></el-input>
          </el-form-item>
          <el-form-item label="医生姓名">
            <el-input v-model="withdrawalParam.docName" placeholder="请输入姓名" style="width: 100px;" @change="queryCondition"></el-input>
          </el-form-item>

          <el-form-item label="缴费情况">
            <el-select v-model="withdrawalParam.dwStatus" placeholder="请选择" @change="queryCondition">
              <el-option value="0" label="未缴费"></el-option>
              
              <el-option value="1" label="已完成"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item>

            <el-button type="info" icon="el-icon-circle-close" @click="remove">清空</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <!-- 放数据部分 -->
        <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%; ">
          <el-table-column prop="dwNo" label="申请编号" width="180">
          </el-table-column>
          <el-table-column prop="patientName" label="姓名" width="150" align="center">
          </el-table-column>
          <el-table-column prop="workerName" label="开药医生" width="150" align="center">
          </el-table-column>
          <el-table-column prop="dwDate" label="开药时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="dwStatus" label="缴费情况" align="center">
            <template slot-scope="scope">
              <span>
                {{ statusList.boolean[scope.row.dwStatus]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="dwCause" label="退药原因" width="150" align="center">
          </el-table-column>
          
          <el-table-column label="药品" width="180" align="center">
            <template slot-scope="scope">
              <el-button @click="drugDetailPage(scope.row.dwNo)">退还详情</el-button>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">


              <el-button v-if="scope.row.dwStatus == 0 " type="success" @click="updateDrugStatus(scope.row.id)">同意</el-button>
                  
            
              <el-button v-if="scope.row.dwStatus == 1 " type="primary">已完成</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <!-- 放分页 -->

        <el-pagination background :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
          @size-change="changeSize" @current-change="changeCurrent" :total="total">
        </el-pagination>
      </el-col>
    </el-row>





    <!-- 查看界面 -->
  
    <el-dialog title="查看药品" :visible.sync="drugDetailInfoVisible">
      <el-row>
        <el-col>
          <el-table :data="drugDetailList" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%; ">
          <el-table-column prop="wdName" label="药名" width="180">
          </el-table-column>
          <el-table-column prop="wdNum" label="数量" width="150" align="center">
          </el-table-column>
          <el-table-column prop="wdBuyPrice" label="价格" width="150" align="center">
          </el-table-column>
          
        </el-table>
        </el-col>
      </el-row>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drugDetailInfoVisible: false,
      withdrawalParam: {},
      pageNum: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      drugDetailList:[],
      dwNo:'',
      statusList : {boolean: {0: '未缴费', 1: '已缴费', 2: '已完成'}}
    }
  },
  methods: {
    nextPage(val) {
      //用户点击下一页触发
      this.pageNum = val;
      this.queryWithdrawal();
    },
    prevPage(val) {
      //用户点击上一页触发
      this.pageNum = val;
      this.queryWithdrawal();
    },
    changeSize(val) {
      //改变每页显示的条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryWithdrawal();
    },
    changeCurrent(val) {
      this.pageNum = val;
      this.queryWithdrawal();
    },
    //搜索按钮
    queryCondition() {
      this.pageNum = 1;
      this.queryWithdrawal();
    },
    //查询开药列表
    queryWithdrawal() {
      let pageParm = {};
      pageParm.pageNum = this.pageNum;
      pageParm.pageSize = this.pageSize;
      pageParm.param = this.withdrawalParam;

      this.$axios.post('api/withdrawal/queryWithdrawal', pageParm)
        .then(res => {
          if (res.data.code === 200) {
            
            let parm = res.data.data;
            this.tableData = parm.list;
            this.total = parm.total;
          } 
        })
    },
    //清空
    remove(){
      this.drugDistributionParam = {}
    },
    //查看药品详情界面
    drugDetailPage(dwNo){
      this.dwNo = dwNo;
      this.queryDrug();
      this.drugDetailInfoVisible = true;
    },

    //查询药品详情
    queryDrug(){
      this.$axios.get('api/withdrawal/queryDrug/'+this.dwNo)
      .then(res=>{
        if(res.data.code === 200){
          this.drugDetailList = res.data.data;
        }
      })
    },
    //同意退药
    updateDrugStatus(id){
      this.$axios.get('api/withdrawal/updateWithdrawal/'+id)
      .then(res=>{
        if (res.data.code === 200){
          this.$message.success("退药成功");
          this.queryCondition();
        } 
        
      })
    }
  },
  created() {
    this.queryWithdrawal();
  }
}
</script>

<!-- 使用现代化风格的配色，例如深蓝配浅灰 -->
<style scoped>
/* 整体背景色调整为浅灰色，减少对眼睛的压力 */
body {
  background-color: #f5f7fa;
}

/* 表单元素样式 */
.el-form {
  border: 1px solid #dbe1e8;
  border-radius: 5px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 表单项标签加粗 */
.el-form-item__label {
  font-weight: bold;
}

/* 搜索按钮使用主题色 */
.el-button--info {
  border-color: #409eff;
  background-color: #409eff;
}

/* 表格样式 */
.el-table {
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 提升表头的视觉重点 */
.el-table th {
  background-color: #409eff;
  color: #ffffff;
}

/* 操作按钮样式 */
.el-button--success {
  border-color: #67c23a;
  background-color: #67c23a;
}
.el-button--primary {
  border-color: #409eff;
  background-color: #409eff;
}

/* 分页器边距 */
.el-pagination {
  margin-top: 20px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 表格悬浮效果 */
.el-table-row:hover {
  background-color: #ecf5ff;
}

/* 对话框样式 */
.el-dialog__header {
  background-color: #409eff;
  color: #fff;
}
</style>